<template>
    <transition name="slider">
        <div class="change-nick">
            <m-header :canreturn=true :titleText="titleText" :confirm='isconfirm' @confirm="doChange"></m-header>
            <div class="infobox">
                <input type="text" placeholder="" ref="nick">
            </div>
            <p class="rule">*仅允许使用汉字、字母和下划线</p>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import MHeader from '@/components/m-header/m-header';
import { putInfo } from '@/base/api/indexpage/getindexinfo';
import { mapMutations, mapGetters } from 'vuex';

export default {
    data() {
        return {
            titleText: '修改昵称',
            isconfirm: true,
        };
    },
    methods: {
        doChange() {
            console.log('确定改了');
            const address = '/user/nickname';
            putInfo(address, {
                token: this.getToken,
                nickname: this.$refs.nick.value,
            }).then((res) => {
                if (res.status_code === 200) {
                    this.setnickname(this.$refs.nick.value);
                    this.$router.back(-1);
                }
            });
        },
        ...mapMutations([
            'setnickname',
        ]),
    },
    computed: {
        ...mapGetters(['getToken']),
    },
    components: {
        MHeader,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.change-nick {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #f2f2f2;

    .infobox {
        height: 56px;
        width: 100%;
        position: relative;

        input {
            outline: none;
            width: 100%;
            height: 100%;
            color: #777777;
            text-indent: 20px;
            font-size: $font-size-medium-x;
            font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';

            &::placeholder {
                color: #aaaaaa;
            }
        }
    }

    .rule {
        margin-top: 10px;
        color: #777777;
        font-size: $font-size-small;
        padding-left: 15px;
    }
}
</style>
